<template>
  <div class="api-url-section">
    <label for="apiUrl">API文档地址：</label>
    <input 
      type="text" 
      id="apiUrl" 
      v-model="localApiUrl" 
      placeholder="请输入Swagger API文档地址，如：http://localhost:8080/v2/api-docs"
      @input="onUrlChange"
    >
    <button @click="loadApiDocs" class="load-btn">加载</button>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'load'])

const localApiUrl = ref(props.modelValue)

// 监听输入变化并通知父组件
function onUrlChange() {
  emit('update:modelValue', localApiUrl.value)
}

// 加载API文档
function loadApiDocs() {
  if (!localApiUrl.value) {
    alert('请输入API文档地址')
    return
  }
  
  try {
    // 处理Swagger UI URL转换为api-docs URL
    let targetUrl = localApiUrl.value.trim();
    
    // 将 Swagger UI 地址转换为 api-docs 地址
    // 例如: http://localhost:8080/swagger-ui/index.html#/...
    // 转换为: http://localhost:8080/api-docs
    const swaggerUIPattern = /(https?:\/\/[^\/]+(?:\/[^\/]+)*)\/swagger-ui\/index\.html.*/;
    const match = targetUrl.match(swaggerUIPattern);
    if (match) {
      targetUrl = match[1] + '/api-docs';
      // 更新输入框显示转换后的URL
      localApiUrl.value = targetUrl;
      emit('update:modelValue', targetUrl);
    }
    
    // 保存到 localStorage
    localStorage.setItem('swaggerApiUrl', targetUrl);
    
    emit('load', targetUrl)
  } catch (error) {
    console.error('处理API地址时出错:', error)
    alert(`处理API地址时出错: ${error.message}`)
  }
}

// 监听modelValue变化更新本地值
watch(() => props.modelValue, (newValue) => {
  localApiUrl.value = newValue
})

// 组件挂载时从localStorage恢复缓存的URL
onMounted(() => {
  const cachedUrl = localStorage.getItem('swaggerApiUrl');
  if (cachedUrl && !props.modelValue) {
    localApiUrl.value = cachedUrl;
    emit('update:modelValue', cachedUrl);
  }
})
</script>

<style scoped>
.api-url-section {
  padding: 10px 15px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f0ff 100%);
  border-bottom: 1px solid #cce5ff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.api-url-section label {
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
}

.api-url-section input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cce5ff;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  min-width: 0;
}

.api-url-section input:focus {
  outline: none;
  border-color: #3399ff;
  box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.2);
}

.load-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, #66b2ff 0%, #3399ff 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(102, 178, 255, 0.3);
  white-space: nowrap;
}

.load-btn:hover {
  background: linear-gradient(135deg, #3399ff 0%, #0080ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(102, 178, 255, 0.4);
}
</style>